<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
</head>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" for="username">姓名</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="username" name="username" autocomplete="off"
                               placeholder="请输入姓名">
                    </div>
                    <label class="layui-form-label" for="idCard">身份证</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="idCard" name="idCard" autocomplete="off"
                               placeholder="请输入身份证">
                    </div>
                    <label class="layui-form-label" for="college">学院</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="college" name="college" autocomplete="off"
                               placeholder="请输入学院">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" for="major">专业</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="major" name="major" autocomplete="off"
                               placeholder="请输入专业">
                    </div>
                    <label class="layui-form-label" for="grade">年级</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="grade" name="grade" autocomplete="off"
                               placeholder="请输入年级">
                    </div>
                    <label class="layui-form-label" for="classNo">班级</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="classNo" name="classNo" autocomplete="off"
                               placeholder="请输入班级">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="searchBtn"
                                id="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="resetBtn">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(["table", "form","upload"], () => {
        const table = layui.table, form = layui.form, $ = layui.$;

        const cols = [[
            {type: "numbers"},
            {title: "姓名", field: "username",width: 100,align: 'center'},
            {title: "性别", field: "gender",width: 80,align: 'center'},
            {title: "电话号码", field: "phone",width: 150,align: 'center'},
            {title: "身份证", field: "idCard",width: 200,align:'center'},
            {title: "学院", field: "college",width: 150,align: "center"},
            {title: "专业", field: "major",width: 150,align: "center"},
            {title: "年级", field: "grade",width: 100,align: 'center'},
            {title: "班级", field: "classNo",width: 100,align: 'center'},
            {title: "贷款金额", field: "amount",width: 100,align: "center"},
            {title: "已还款", field: "returnAmount",width: 100,align: 'center'},
            {title: "待还款", field: "owingAmount",width: 100,align: 'center'},
            {title: "创建时间", field: "createTime",width: 180,align: "center"},
            {title: "修改时间", field: "updateTime",width: 180,align: "center"}
        ]];

        const dataTable = table.render({
            elem: "#dataTable",
            height: "600px",
            toolbar: "#tableBar",
            id: "dataTable",
            page: {
                layout:['limit','count','prev','page','next','skip'],
                curr: 1,
                limit: 20
            },
            limit:[5,10,20,30,40,50],
            url: ctx + "loan/return/returnLoanList",
            parseData: ({code, data, msg}) => {
                const {list, total} = data;
                return {
                    "code": code,
                    "msg": msg,
                    "count": total,
                    "data": list
                }
            },
            cols: cols
        });

        form.on("submit(searchBtn)", data => {
            dataTable.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            })
        })

        form.on("submit(resetBtn)", data => {
            form.val("searchForm", {
                username: "",
                idCard: "",
                major: "",
                grade: "",
                classNo: "",
                type: ""
            })
            $("#searchBtn").click();
        })
    });
</script>
</body>
</html>